<template>
 <div class="star" :class="`star-${size}`">
    <span class="star-item" v-for="(sc, index) in starClasses" :key="index" :class="sc"></span>
  </div>
</template>

<script>
const CLASS_ON = 'on'
const HALF = 'half'
const CLASS_OFF = 'off'

export default {
  props: {
    score: Number,
    size: Number
  },
  computed: {
    starClasses () {
      const scs = []
      const { score } = this
      const scoreInteger = Math.floor(score)
      for (let i = 0; i < scoreInteger; i++) {
        scs.push(CLASS_ON)
      }

      if (score * 10 - scoreInteger * 10 >= 5) {
        scs.push(HALF)
      }

      while (scs.length < 5) {
        scs.push(CLASS_OFF)
      }

      return scs
    }
  }
}
</script>
